<template>
    <div class="wrapper">
        <router-link to="/index/123">首页123</router-link>
        <router-link to="/index/456">首页456</router-link>
        <router-link to="/progress/123">进度123</router-link>
        <router-link to="/progress/567">进度567</router-link>
        <router-link to="/login">登录页面</router-link>
         <router-link to="/module">vuex模块页面</router-link>
           <router-link to="/talk">talk页面</router-link>
        <!-- <router-link to="/progress/exact">进度--exact</router-link> -->
        <!-- <router-link :to="{name:'Progress', path:'/progress'}">进度</router-link> -->
        <transition name='fade'>
            <!-- 二級路由 -->
            <router-view />
        </transition>
        <!-- 命名视图 -->
        <div>命名视图</div>
        <router-view name="a" />
    </div>
</template>

<script>
/* eslint-disable */
import api from './file_interface'
export default {
    // 方法三：
    beforeRouteEnter (to, from, next) {
        // ...
        console.log('index before enter')
        next()  // 执行跳转
    },
    // 这个怎么用，同一个组件，不同的路由下，就是根据参数不一样，会触发
    brforeRouteUpdate (to, from, next) {
        // 弹出错误提醒
        console.log('error')
        console.log('index  update enter')
        next()
    },
    // 表單修改的數據，在離開之前，判断要不要离开，主要保留数据,离开的行为的钩子
    beforeRouteLeave (to, from, next) {
        console.log('index before Leave')
        if(confirm('are you sure?')){
            next()
        }
        // ...
        // next()
    },
    components: {},
    props: ['id', 'title', 'pid', 'gid'],
    data () {
        return {
            taskInfo: {
                pageSize: 9,
                type: 1,
                taskList: []
            },
            singerData: []
        }
    },
    watch: {},
    computed: {},
    methods: {
        initData (curPage) {
            curPage += 1
            let data = {
                type: this.taskInfo.type,
                page: curPage
            }
            let url = api.getExerciseList
            this.axios.post(url, {
                ...data
            }).then(res => {
                this.singerData = res.data
            })
        },
        getMockData(){
            let url = '/api/data'
            this.axios.get(url).then(res => {
                console.log(res)
            })
        },
    },
    created () {
        // this.initData(0)
        this.getMockData()
    },
    mounted () {
        // 進行耦合，不需要获取this.$route 
        // console.log(this.id) // 123
        // console.log(this.title) // 123
        // console.log(this.$route)
        console.log('index mounted')
    }
}
</script>
